<template>
	<div v-loading="loading">
		<div class="title1">
			<div>
				<span class="h1">基础管理</span>
				<span class="h2">日志</span>
			</div>
		</div>
		<div class="log-type">
			<div style="width:240px;float:right;position: relative;">
					<el-input v-model="input" placeholder="请输入..."></el-input>
					<i class="el-icon-search" @click="look()" style="position: absolute; width:40px;height:36px;right:0;top:0;color:#000;text-align:center;line-height:36px"></i>
			</div>
			<label class="control-label" style="margin-right: 20px;float: right;">日志查找</label>
		</div>
		<div class="log-cocnten">
			<div class="log-con">
				<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table">
				<thead>
					<tr clasd="trHeader">
						<td>#</td>
						<td>操作人</td>
						<td>操作时间</td>
						<td class="td aginle">修改前的值</td>
						<td class="td aginle">修改后的值</td>
						<td>操作类型</td>
						<td>业务类型</td>
						<td>业务ID</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,index) in tableData1">
						<td>{{index+1}}</td>
						<td>{{item.CreateMan}}</td>
						<td>{{item.CreateDate}}</td>
						<td class="td" @click="tank(item.BeforeValue)"><div class="wrie">{{item.BeforeValue}}</div></td>
						<td class="td" @click="tank(item.ResultValue)"><div class="wrie">{{item.ResultValue}}</div></td>
						<td>{{item.OperateType}}</td>
						<td>{{item.BusinessType}}</td>
						<td>{{item.BusinessID}}</td>
						<td><el-button size="small" type="danger" @click="deleteRow(item.ID)">删除</el-button></td>
					</tr>
				</tbody>
			</table>
				<div style=" float:right;margin-top: 10px;margin-right: 5px;">
					<el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :total="leng">
					</el-pagination>
				</div>
			</div>
		</div>
		<div v-if="dialogVisible" class="edit">
			<el-dialog
			  title="修改内容"
			  :visible.sync="dialogVisible"
			  width="30%"
			  >
			  <span class="neirog">{{vlaue}}</span>
			  <span slot="footer" class="dialog-footer">
			    <el-button @click="dialogVisible = false">取 消</el-button>
			    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			  </span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import api from '../../kits/api.js';
export default {
	name: 'log',
	data() {
		return {
			input:"",
			vlaue:"",
			loading:true,
			value: '',
			radio: '1',
			value1: '',
			value2: '',
			tableData1: [],
			currentRow: "",
			leng:1,
			dialogVisible:false
		}
	},
	created(){
		this.logList()
	},
	methods: {
		 handleClose(done) {
	        this.$confirm('确认关闭？')
	          .then(_ => {
	            done();
	          })
	          .catch(_ => {});
	     },
		handleCurrentChange(val) {
			var me = this
			this.loading=true
			me.$axios.post(api.logList, {
			  "Para": this.input,
			  "PageSize": 10,
			  "PageIndex": val-1,
			  "OrderbyString": ""
			}).then((res) => {
				if(res.data.isOK) {
					this.loading=false
					console.log(res)
					me.tableData1 = res.data.data.Data
					me.leng = res.data.data.Items || 1
				} else {
					if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
						this.$router.push({
							path: '/login'
						})
					} else {
						this.loading = false
						this.$message.error(res.data.msg);
					}
				}
			});
		},
		deleteRow(id) {
			this.loading=true
			var me = this
			me.$axios.get(api.logDel+"/"+id).then((res) => {
				if(res.data.isOK) {
					this.loading=false
					me.logList()
				} else {
					if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
						this.$router.push({
							path: '/login'
						})
					} else {
						this.loading = false
						this.$message.error(res.data.msg);
					}
				}
			});
		},
		
		//获取日志列表
		logList(){
			this.loading=true
			var me = this
			me.$axios.post(api.logList, {
			  "Para": "",
			  "PageSize": 10,
			  "PageIndex": 0,
			  "OrderbyString": ""
			}).then((res) => {
				if(res.data.isOK) {
					this.loading=false
					console.log(res)
					this.tableData1 = res.data.data.Data
					this.leng = res.data.data.Items || 1
				} else {
					if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
						this.$router.push({
							path: '/login'
						})
					} else {
						this.loading = false
						this.$message.error(res.data.msg);
					}
				}
			});
		},
		//搜索
		look(){
			this.loading=true
			var me = this
			me.$axios.post(api.logList, {
			  "Para": this.input,
			  "PageSize": 10,
			  "PageIndex": 0,
			  "OrderbyString": ""
			}).then((res) => {
				if(res.data.isOK) {
					this.loading=false
					console.log(res)
					this.tableData1 = res.data.data.Data
					this.leng = res.data.data.Items || 1
				} else {
					if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
						this.$router.push({
							path: '/login'
						})
					} else {
						this.loading = false
						this.$message.error(res.data.msg);
					}
				}
			});
		},
		tank(val){
			this.dialogVisible=true
			this.vlaue = val
		}
	}
}
</script>

<style>
.title1 {
	width: 100%;
	padding: 15px;
	background: #fff;
	border-bottom: 1px solid #dddee1;
}

.title1 span {
	margin-right: 10px;
}

.title1 .h1 {
	font-size: 16px;
	font-weight: 600;
}

.title1 .h2 {
	font-size: 14px;
}

.log-type {
	margin-top: 10px;
}
.log-type:after{
	display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0
}

.log-conten-top {
	margin-top: 20px;
	height: 30px;
	line-height: 30px;
}

.log-title,
.log-pro,
.log-star,
.log-end,
.log-ok {
	display: block;
	float: left;
}

.log-title {
	padding: 0 15px;
}

.log-pro {
	width: 200px;
	margin-right: 15px;
}

.log-pro span,
.log-end span {
	display: block;
	width: 32px;
	text-align: center;
	float: left;
}

.log-star,
.log-end {
	margin-right: 15px;
}

.log-con {
	margin-top: 10px;
}

.sale-page {
	float: right;
	margin-top: 15px;
}
.table{
	border-right:1px solid #DCDCDC;
	border-left:1px solid #DCDCDC;
	border-bottom:1px solid #DCDCDC;
	/*border: 1px solid #DCDCDC;*/
	table-layout: fixed;
}
.table tr{
	/*border:1px solid #DCDCDC;*/
}

.table tr td{
	/*border-left:1px solid #DCDCDC;*/
	border-top:1px solid #DCDCDC;
	text-align: center;
	overflow: hidden;
	/*width:  !important;*/
	height: 40px;
	line-height: 40px;
	white-space: nowrap;
	text-overflow:ellipsis;
	overflow: hidden;

}
.table .aginle{
	text-align: center !important;
}
.table .td{
	width: 24%;
	text-align: left;
}
tbody{
	background: #fff;
}
.wrie{
	box-sizing: border-box;
	padding: 0 20px;
	white-space: nowrap;
	width:100%;
	height: 40px;
	line-height: 40px;
	text-overflow:ellipsis;
	overflow: hidden;
}
.wrie1{
	box-sizing: border-box;
	padding: 0 5px;
	word-break : break-all; 
	width:100%;
	height: 40px;
	line-height: 40px;
	/*text-overflow:ellipsis;*/
	overflow: hidden;
}
.neirog{
	display: block;
	width: 100%;
	word-break : break-all;
	line-height: 30px;
}
.edit{
	position: fixed;
	background: rgba(0,0,0,.5);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.log-cocnten{
	height: 700px;
	overflow: auto;
}
.control-label{
	height: 36px;
	line-height: 36px;
}
</style>